<template>
    <div class="inputWapper">
        <input 
        :type="type" 
        :placeholder="placeholder"
        :rule="rule" 
        v-model="inputVal"
        @blur="showTips"
        :class="{error:!isValid}"
        />
    </div>
</template>

<script>
export default {
    props:['type','placeholder','rule','errMsg'],
    data(){
        return{
            inputVal:'',
            isValid:true
        }
    },
    watch:{
        // 监听输入框值变动
       inputVal(newVal){
           const regExp = new RegExp(this.rule);
           this.isValid = regExp.test(newVal);
           this.$emit('valChanged',newVal);
       } 
    },
    methods:{
        showTips(){
            if(!this.isValid)this.$toast.fail(this.errMsg);
        }
    }
}
</script>

<style lang="less" scoped>
.inputWapper{
    display: flex;
    padding:0 6.667vw;
    text-align: center; 
    input{
        flex: 1;
        height: 16.667vw;
        border-bottom:1px solid #c0c0c0;
        font-size: 18px;
        color: #c0c0c0;
        &::placeholder{
            font-size: 4.444vw;
            color: #c0c0c0;
        }
    }
}
.error{
    border-bottom-color: #ffc0cb !important;
}
</style>